import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:qlevar_router/qlevar_router.dart';
import 'package:stacked/stacked.dart';
import '../../heartbeat/helpers/magma_constant.dart';
import '../../heartbeat/helpers/magma_text_style.dart';
import '../../heartbeat/helpers/magma_color.dart';
import '../../comms_link/challenge_store.dart';
import '../../heartbeat/blueprint/challenge_model.dart';

/// 挑战列表页面
class ChallengeListStory extends StatelessWidget {
  const ChallengeListStory({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<QuestManager>.reactive(
      viewModelBuilder: () => QuestManager()..initializeDefaultQuests(),
      builder: (context, viewModel, child) {
        return Scaffold(
          backgroundColor: MagmaColor.black,
          body: SafeArea(
            bottom: false,
            child: Column(
              children: [
                // 顶部导航栏
                _constructNavigationBar(context),
                SizedBox(height: 10.h),
                // 挑战描述
                _buildChallengeDescription(),

                // 挑战列表
                Expanded(child: _buildChallengeList(viewModel)),
              ],
            ),
          ),
        );
      },
    );
  }

  /// 构建导航栏
  Widget _constructNavigationBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
      child: Row(
        children: [
          GestureDetector(
            onTap: () => QR.back(),
            child: Image.asset(MagmaConstant.back, width: 20.w, height: 25.w),
          ),
          Spacer(),
          Text(
            'Challenge',
          ).blackHanSans(fontSize: 24.sp, color: MagmaColor.white),
          Spacer(),
          SizedBox(width: 20.w), // 占位，保持标题居中
        ],
      ),
    );
  }

  /// 构建挑战描述
  Widget _buildChallengeDescription() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Text(
        'Marathon Challenge: Break Through Your Limits And Discover A Stronger Self!',
        textAlign: TextAlign.center,
        style: TextStyle(height: 1.5),
      ).blackHanSans(
        fontSize: 16.sp,
        color: MagmaColor.white.withOpacity(0.8),
        fontWeight: FontWeight.w400,
      ),
    );
  }

  /// 构建挑战列表
  Widget _buildChallengeList(QuestManager viewModel) {
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
      itemCount: viewModel.quests.length,
      itemBuilder: (context, index) {
        final challenge = viewModel.quests[index];
        return Padding(
          padding: EdgeInsets.only(bottom: 33.h),
          child: _buildChallengeCard(challenge, viewModel),
        );
      },
    );
  }

  /// 构建挑战卡片
  Widget _buildChallengeCard(QuestModel challenge, QuestManager viewModel) {
    return AspectRatio(
      aspectRatio: 371 / 316,
      child: GestureDetector(
        onTap: () => _enterChallenge(challenge),
        child: Container(
          padding: EdgeInsets.all(12.w),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(MagmaConstant.challengeListCard),
              fit: BoxFit.cover,
            ),
          ),
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 展示图片部分
                  AspectRatio(
                    aspectRatio: 350 / 206,
                    child: Stack(
                      children: [
                        // 挑战展示图片
                        Image.asset(
                          challenge.image,
                          fit: BoxFit.cover,
                          width: double.infinity,
                        ),
                        // Enter按钮
                        Positioned(
                          top: 12.h,
                          right: 12.w,
                          child: Container(
                            padding: EdgeInsets.symmetric(
                              horizontal: 20.w,
                              vertical: 8.h,
                            ),
                            decoration: BoxDecoration(
                              color: MagmaColor.purple,
                              borderRadius: BorderRadius.circular(20.r),
                            ),
                            child: Text('Enter').blackHanSans(
                              fontSize: 16.sp,
                              color: MagmaColor.black,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 挑战信息部分
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(height: 16.h),
                      // 距离信息
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: 'Total Distance: ',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: MagmaColor.grey,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            TextSpan(
                              text: '${challenge.distance} Kilometers',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: MagmaColor.black,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 6.h),
                      // 时间限制信息
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: 'Completion Time Limit: ',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: MagmaColor.grey,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            TextSpan(
                              text:
                                  '${challenge.minTime}-${challenge.maxTime} Minutes',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: MagmaColor.black,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              // 挑战标题
              Positioned(
                bottom: -30.h,
                left: -15.w,
                right: 145.w,
                child: Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 16.w,
                    vertical: 6.h,
                  ),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF0E9F9),
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(22.5.r),
                      bottomRight: Radius.circular(22.5.r),
                    ),
                    border: Border.all(color: MagmaColor.black, width: 1.w),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // 挑战编号
                      Container(
                        width: 32.w,
                        height: 32.w,
                        decoration: BoxDecoration(
                          color: MagmaColor.purple,
                          shape: BoxShape.circle,
                        ),
                        child: Center(
                          child: Text(challenge.id).blackHanSans(
                            fontSize: 18.sp,
                            color: MagmaColor.black,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                      SizedBox(width: 12.w),
                      // 挑战标题
                      Expanded(
                        child: Text(challenge.title).blackHanSans(
                          fontSize: 14.sp,
                          color: MagmaColor.black,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 进入挑战详情
  void _enterChallenge(QuestModel challenge) {
    QR.to('/challenge-detail/${challenge.id}');
  }
}
